<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>书籍列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/theme-chalk/index.css">
</head>
<body>

<div  id="app" class="container">
    <center>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }"><a href="index.html">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>书籍列表</el-breadcrumb-item>
        </el-breadcrumb>
    <hr>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small">
        <el-form-item label="书名">
            <el-input v-model="queryParams.name" placeholder="书名"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="queryParams.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
            <a href="el-book-save.html">
                <el-button type="primary">添加书籍</el-button>
            </a>
        </el-form-item>
    </el-form>

    <el-table
                :data="bookList"
                style="width: 700px ">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="100"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="180"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="center">
                <template slot-scope="scope">
                    <el-row type="primary">
                        <a :href="'book-update.html?'+ scope.row.id" >
                            <el-button type="primary" size="mini" round>修改</el-button>
                        </a>
                        <el-button type="danger" @click="doDelete(book.id)" size="mini" round>删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                    @size-change="doPageSizeChange"
                    @current-change="doJumpPage"
                    :current-page.sync="queryParams.currentPage"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="queryParams.pageSize"
                    layout="total, prev, pager, next,sizes"
                    :total="total">
            </el-pagination>
        </div>

    </center>
</div>

<!-- 引入组件库 -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/vue.min.js"></script>
<script src="element-ui/index.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            queryParams: {
                currentPage: 1,//当前页
                pageSize: 10,//页大小 每页显示数量
                name: '',
                author: ''
            },
            pages:0,//总页数
            bookList: [],
            total: 0 //总记录数
        },
        methods: {
            //加载书籍列表数据
            loadBookList() {
                $.get('/book/page',this.queryParams,function (result) {
                    vm.bookList = result.data.records;
                    vm.pages = result.data.pages;
                    vm.total = result.data.total;
                    vm.pageSize = result.data.size;
                    vm.currentPage = result.data.current;
                })
            },

            //处理查询事件
            doSearch() {
                this.loadBookList();
            },
            //处理页大小改变事件
            doPageSizeChange(val) {
                this.queryParams.pageSize=val;
                this.queryParams.currentPage=1;
                this.loadBookList();
            },
            //处理跳页事件
            doJumpPage(i) {
                i = Math.max(1,i);
                i = Math.min(this.pages,i);
                this.queryParams.currentPage = i;
                this.loadBookList();
            },
            //处理删除事件
            doDelete(id){
                if (!confirm('确认要删除该记录吗？')){
                    return;
                }
                $.post('/book/delete',{id:id},function (result) {
                    if (result.code === 0){
                        //解决最后一页最后条一条记录删除后重新加载列表没有数据的问题
                        if (vm.bookList.length === 1 && vm.queryParams.currentPage > 1){
                            vm.queryParams.currentPage--
                        }
                        vm.loadBookList();
                    }else {
                        alert(result.msg);
                    }
                })
            }
        },
        created:function () {
            //当Vue实例创建完毕就去加载书籍列表
            this.loadBookList();
        }
    })
</script>

</body>
</html>